[CSS] background-blend-mode 이미지와 배경색 혼합하기

CSS를 사용하여 배경 이미지와 다른 이미지 또는 배경색을 하나로 섞어 표현할 수 있는 방법을 알아봅니다. 쉽게 얘기해서 하늘에 구름이 떠 있는 이미지에 특별한 배경색을 혼합해 적용하려는 경우가 예가 될 수 있겠습니다.

# CSS background-blend-mode 알아보기

CSS에는 백그라운드 이미지에 다른 색을 적용할 수 있는 방법이 존재합니다. 바로 css의 background-blend-mode입니다. 해당 css 속성을 사용하면 위와 같이 이미지와 배경을 혼합하여 구현이 가능합니다. 이때 설정 값으로는 multiply가 사용되야 합니다.

background-blend-mode: multiply;


이 방법은 이미지 자체에 투명 효과가 없어도 사용 가능한 방법입니다. 즉 transparency를 가진 이미지가 아니더라도 적용이 가능하다는 장점이 있습니다. 그럼 예제를 하나 만들어보려고 합니다. 아래를 참고해주세요.

! CSS background-blend-mode 예제소스 보기

아래는 간단한 예제입니다. 먼저 이미지를 보여줄 태그를 하나 만들었습니다.

이제 아래와 같이 css를 적용해봅니다. 이미지를 추가하고 배경색을 지정한 뒤 위에서 사용된 background-blend-mode를 사용하려고 합니다. 먼저 적용하기 이전의 css 코드는 아래와 같겠죠.

>> Before

>> After

위에 After를 보시면 아래 두 줄이 추가된 것을 확인할 수 있습니다. 과정 잘 적용될까요? 궁금하니 실제로 구현된 모습을 아래에 구현해 보았습니다. 확인해보세요.


>> 배경이미지만 적용한 모습



>> 배경이미지에 background-blend-mode를 사용한 모습



이처럼 background-blend-mode 속성을 사용하면  배경색이 이미지와 함께 보여지는 혼합 효과가 있습니다. 그래서 blend-mode라는 이름이 사용되었다고 생각하시면 됩니다.


여기까지 css에서 백그라운드에 적용하는 스타일 속성 중 하나인 background-blend-mode를 알아보았습니다.